<script setup lang="ts">
import { getQclRightData } from '@/api/Quancheng';
import deviceAlarmsPie from '@/components/ECharts/deviceAlarmsPie/index.vue';
import COMPONENT_TITLES from '@/constants/components/componentsTitle';
import { getAlarmInfo } from '@/api/deviceAlarms';
import { getEffectivenessCode } from '@/enums/AlarmEffectivenessEnum';

const alarmInfosData = ref({} as any);
const emit = defineEmits(['postMessage']);
//点击饼图触发的事件
const deviceAlarmsHandle = async (item: any) => {
  try {
    const { data } = await getAlarmInfo({ effective: getEffectivenessCode(item.name) });
    emit('postMessage', data, '设备告警概况', item.name);
  } catch (error) {
    console.log(error);
  }
};
onMounted(async () => {
  try {
    const { data } = await getQclRightData({ type: 'alarmInfos' });
    alarmInfosData.value = data.alarmInfos;
  } catch (error) {
    console.warn(error, '获取设备告警概况失败!');
  }
});
</script>

<template>
  <div class="chart-box">
    <deviceAlarmsPie
      @click-data="deviceAlarmsHandle"
      :title="COMPONENT_TITLES.DEVICE_ALARMS"
      :value="alarmInfosData.total"
      :echarts-data="alarmInfosData.echartsData"
    />
  </div>
</template>

<style scoped lang="scss">
.chart-box {
  width: 100%;
  height: 100%;
}
</style>
